<template>
  <div class="top">
    <!--热门视频title-->
    <div>
      <span class="card-title-text ellipsis">热门视频</span>
    </div>
    <!--热门视频content-->
    <div class="content" >
      <div v-for="(item,index) in hotDate.slice(0, 5)">
        <div  class="card_list">
          <!--img-->
          <div class="img_list">
            <img  :src="'static/img/'+item.img" alt="">
          </div>
          <!--text-->
          <div class="title_text">
            <span>{{item.title}}</span>
          </div>
          <div class="text_bom">
            <span class="b1 el-icon-video-play">{{item.watch}}万</span>
            <span class="b2 el-icon-user">{{item.body}}</span>
          </div>
        </div>
      </div>

    </div>
    <!--知识title-->
    <div class="title">
      <span class="card-title-text ellipsis">知识</span>
      <a class="card-title-more" href="/know">更多</a>
    </div>
    <!--知识content-->
    <div class="content">
      <div v-for="(item,index) in KnowledgeData.slice(0,5)">
        <div class="card_list">
          <!--img-->
          <div class="img_list">
            <img  :src="'static/img/'+item.img" alt="">
          </div>
          <!--text-->
          <div class="title_text">
            <span>{{item.title}}</span>
          </div>
          <div class="text_bom">
            <span class="b1 el-icon-video-play">{{item.watch}}万</span>
            <span class="b2 el-icon-user">{{item.body}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--影视title-->
    <div class="title">
      <span class="card-title-text ellipsis">影视</span>
      <a class="card-title-more" href="/films">更多</a>
    </div>
    <!--影视content-->
    <div class="content">
      <div v-for="(item,index) in FilmData.slice(0,5)">
        <div class="card_list">
          <!--img-->
          <div class="img_list">
            <img  :src="'static/img/'+item.img" alt="">
          </div>
          <!--text-->
          <div class="title_text">
            <span>{{item.title}}</span>
          </div>
          <div class="text_bom">
            <span class="b1 el-icon-video-play">{{item.watch}}万</span>
            <span class="b2 el-icon-user">{{item.body}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--搞笑title-->
    <div class="title">
      <span class="card-title-text ellipsis">搞笑</span>
      <a class="card-title-more" href="/happy">更多</a>
    </div>
    <!--搞笑content-->
    <div class="content">
      <div v-for="(item,index) in HappyData.slice(0,5)">
        <div class="card_list">
          <!--img-->
          <div class="img_list">
            <img  :src="'static/img/'+item.img" alt="">
          </div>
          <!--text-->
          <div class="title_text">
            <span>{{item.title}}</span>
          </div>
          <div class="text_bom">
            <span class="b1 el-icon-video-play">{{item.watch}}万</span>
            <span class="b2 el-icon-user">{{item.body}}</span>
          </div>
        </div>
      </div>
    </div>

    <!--萌娃title-->
    <div class="title"><span class="card-title-text ellipsis">萌娃</span>
      <a class="card-title-more" href="/baby">更多</a>
    </div>
    <!--萌娃content-->
    <div class="content">
      <div v-for="(item,index) in BabyData.slice(0,5)">
        <div class="card_list">
          <!--img-->
          <div class="img_list">
            <img  :src="'static/img/'+item.img" alt="">
          </div>
          <!--text-->
          <div class="title_text">
            <span>{{item.title}}</span>
          </div>
          <div class="text_bom">
            <span class="b1 el-icon-video-play">{{item.watch}}万</span>
            <span class="b2 el-icon-user">{{item.body}}</span>
          </div>
        </div>
      </div>
    </div>

    <!--明星title-->
    <div class="title"><span class="card-title-text ellipsis">明星</span>
      <a class="card-title-more" href="/star">更多</a>
    </div>
    <!--明星content-->
    <div class="content">
      <div v-for="(item,index) in StarData.slice(0,5)">
        <div class="card_list">
          <!--img-->
          <div class="img_list">
            <img  :src="'static/img/'+item.img" alt="">
          </div>
          <!--text-->
          <div class="title_text">
            <span>{{item.title}}</span>
          </div>
          <div class="text_bom">
            <span class="b1 el-icon-video-play">{{item.watch}}万</span>
            <span class="b2 el-icon-user">{{item.body}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--美食title-->
    <div class="title"><span class="card-title-text ellipsis">美食</span>
      <a class="card-title-more" href="/food">更多</a>
    </div>
    <!--美食content-->
    <div class="content">
      <div v-for="(item,index) in FoodData.slice(0,5)">
        <div class="card_list">
          <!--img-->
          <div class="img_list">
            <img  :src="'static/img/'+item.img" alt="">
          </div>
          <!--text-->
          <div class="title_text">
            <span>{{item.title}}</span>
          </div>
          <div class="text_bom">
            <span class="b1 el-icon-video-play">{{item.watch}}万</span>
            <span class="b2 el-icon-user">{{item.body}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Top",
    data(){
      return{
        hotDate:[{}],
        KnowledgeData:[{}],
        FilmData:[{}],
        HappyData:[{}],
        StarData:[{}],
        FoodData:[{}],
        BabyData:[{}],
      }
    },
    methods:{
      /*查询所有热门*/
      findHot() {
        let _this = this
        this.$axios.get("http://localhost:8066/news/hot").then(function (res) {
          _this.hotDate = res.data
        }).catch(function (err) {
          alert('查询失败')
        })
      },
      /*查询知识热门*/
      getKnowledgeByWatch(){
        let _this = this;
        this.$axios.get('http://localhost:8066/news/hotClass/'+1).then(function (res) {
          _this.KnowledgeData = res.data
        }).catch(function (err) {
          alert("查询失败")
        })
      },
      /*查询影视热门*/
      getFilmByWatch(){
        let _this = this;
        this.$axios.get('http://localhost:8066/news/hotClass/'+2).then(function (res) {
          _this.FilmData = res.data
        }).catch(function (err) {
          alert("查询失败")
        })
      },
      /*查询搞笑热门*/
      getHappyByWatch(){
        let _this = this;
        this.$axios.get('http://localhost:8066/news/hotClass/'+3).then(function (res) {
          _this.HappyData = res.data
        }).catch(function (err) {
          alert("查询失败")
        })
      },
      /*查询明星热门*/
      getStarByWatch(){
        let _this = this;
        this.$axios.get('http://localhost:8066/news/hotClass/'+4).then(function (res) {
          _this.StarData = res.data
        }).catch(function (err) {
          alert("查询失败")
        })
      },
      /*查询美食热门*/
      getFoodByWatch(){
        let _this = this;
        this.$axios.get('http://localhost:8066/news/hotClass/'+5).then(function (res) {
          _this.FoodData = res.data
        }).catch(function (err) {
          alert("查询失败")
        })
      },
      /*查询萌娃热门*/
      getBabyByWatch(){
        let _this = this;
        this.$axios.get('http://localhost:8066/news/hotClass/'+6).then(function (res) {
          _this.BabyData = res.data
        }).catch(function (err) {
          alert("查询失败")
        })
      },
    },
    mounted() {
      this.findHot()
      this.getKnowledgeByWatch()
      this.getFilmByWatch()
      this.getHappyByWatch()
      this.getStarByWatch()
      this.getFoodByWatch()
      this.getBabyByWatch()
    }
  }
</script>

<style scoped>
  .content{
    width: 1300px;
    height:420px;
    margin-top: 10px;
  }
  .text_bom span{
    font-size: 13px;
    color: gray;
  }
  .text_bom .b2{
    margin-left: 50px;
  }
  .card-title-text:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 2px;
    height: 22px;
    margin-top: -9px;
    border-radius: 1.5px;
    background: #ff1e66;
  }

  .card-title-text {
    position: relative;
    width: 50%;
    height: 40px;
    padding: 0 0 0 12px;
    font-size: 29px;
    color: #000;
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .card-title-more {
    position: relative;
    margin-left: 1160px;
    padding-right: 15px;
    color: #888;
  }

  a{
    text-decoration: none;
  }
   .card-title-more:after {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url() 100%/auto 100% no-repeat;
  }

  .title{
    margin-top: 50px;
  }
  .card_list{
    margin-top: 10px;
    float: left;
    margin-left: 25px;
  }
  .img_list{
    width: 220px;
    height: 300px;
    overflow: hidden;
    border-radius: 5px;
  }
  .img_list img{
    display: block;
    transition: all 1s;
    width: 220px;
    height: 300px;
    border-radius: 5px;
  }

  .img_list img:hover{
    transform: scale(1.1);
  }

  .title_text{
    margin-top: 5px;
    font-size: 15px;
    width: 210px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
